<template>
    <div class="layout full">
        <header class="header">图书管理系统</header>
        <div class="main">
            <aside class="sider">
                <el-menu :default-active="$route.path" router>
                    <el-menu-item index="/home/books">图书管理</el-menu-item>
                    <el-menu-item index="/home/readers">读者管理</el-menu-item>
                    <el-menu-item index="/home/borrows">借阅管理</el-menu-item>
                    <el-menu-item index="/home/stats">数据统计</el-menu-item>
                    <el-menu-item index="logout" @click="logout" style="color:#F56C6C;">退出登录</el-menu-item>
                </el-menu>
            </aside>
            <section class="content">
                <router-view />
            </section>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
const router = useRouter()
onMounted(() => {
    if (!localStorage.getItem('token')) {
        router.replace('/login')
    }
})
const logout = () => {
    localStorage.removeItem('token')
    router.replace('/login')
}
</script>

<style scoped>
.layout.full {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f6fa;
}

.header {
    height: 60px;
    background: #409EFF;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    padding-left: 30px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.main {
    flex: 1;
    display: flex;
    min-height: 0;
    height: 0;
}

.sider {
    width: 180px;
    background: #fff;
    border-right: 1px solid #eee;
    padding-top: 10px;
    height: 100%;
    box-sizing: border-box;
}

.content {
    flex: 1;
    padding: 24px;
    overflow: auto;
    background: #f5f6fa;
    height: 100%;
    box-sizing: border-box;
}
</style>
